<template>
  <div style="height: 100%;display: flex;flex-direction: column">
    <div class="header" :class="getDevice()">
      <div class="header-logo" :class="getMenuClass()">
        <img src="../../assets/adminlogo2.png">

        <img src="../../assets/adminlogo_text.png">
      </div>

      <div class="header-top">
        <div v-if="device!=2" class="nav-control" style="transition: all 0.2s ease-in-out !important;cursor: pointer;">
          <el-icon v-if="!isCollapse" @click="changeCollapse()" style="color: var(--theme_admin_primary_color);" :size="32">
            <Fold />
          </el-icon>

          <el-icon v-if="isCollapse" @click="changeCollapse()" style="color: var(--theme_admin_primary_color);" :size="32">
            <Expand />
          </el-icon>
        </div>

        <div class="space">

        </div>

        <div class="header-right">
          <el-icon v-if="!isFullFlag" @click="fullScreen" style="color: black;" :size="20">
            <FullScreen />
          </el-icon>

          <el-icon v-if="isFullFlag" @click="exitFullScreen" style="color: black;" :size="20">
            <Crop />
          </el-icon>

          <div class="space" style="width: 50px">
          </div>

          <div class="my-account-wrapper">
            <div style="width: 80px">
              {{ getUsername() }}
            </div>
            <el-dropdown trigger="click" style="color: black;cursor: pointer;">
              <span class="el-dropdown-link" >
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="loginout">退出登录</el-dropdown-item>
                  <!-- <el-dropdown-item>Action 2</el-dropdown-item>
                  <el-dropdown-item>Action 3</el-dropdown-item>
                  <el-dropdown-item disabled>Action 4</el-dropdown-item>
                  <el-dropdown-item divided>Action 5</el-dropdown-item> -->
                </el-dropdown-menu>
              </template>
            </el-dropdown>

            <el-avatar style="margin:0px 8px;"
                       src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
          </div>
      </div>
      </div>
    </div>

    <div class="content" :class="getDevice()">
      <div class="menu" :class="getMenuClass()"  style="transition: all 0.2s ease-in-out !important;padding: 24px 8px;box-sizing: border-box;max-height: 100%;">
        <el-menu
            :default-active="path"
            router style="transition: all 0.2s ease-in-out !important;"
            :collapse="getIsCollapse()" class="el-menu-vertical-demo ">
          <el-sub-menu index="/adminIndex">
            <template #title>
              <el-icon>
                <Tools />
              </el-icon>
              <span style="margin-left: 8px;">系统管理</span>
            </template>
            <el-menu-item index="/adminIndex/apiLogManage" >日志管理</el-menu-item>
            <el-menu-item index="/adminIndex/taskJobManage" >任务管理</el-menu-item>
            <el-menu-item index="/adminIndex/userManage" >用户管理</el-menu-item>
            <el-menu-item index="/adminIndex/roleManage" >角色管理</el-menu-item>
            <el-menu-item index="/adminIndex/schoolManage" >学校管理</el-menu-item>
            <el-menu-item index="/adminIndex/scoreRuleManage" >规则管理</el-menu-item>
            <el-menu-item index="/adminIndex/subjectManage" >项目管理</el-menu-item>
            <el-menu-item index="/adminIndex/scheduleManage" >选课配置</el-menu-item>
            <!--            <el-menu-item index="/adminIndex/batchManage" >批次管理</el-menu-item>-->

          </el-sub-menu>


          <!-- <el-menu-item v-if="isAndroid()" index="4" :route="{ path: '/index/setting' }">
            <el-icon>
              <Tools />
            </el-icon>
            <span>系统管理</span>
          </el-menu-item> -->
        </el-menu>
<!--        <div v-if="!getIsCollapse()" class="adminImg" style="bottom:10px;position:absolute;display: flex;flex-direction: row;align-items: center;justify-content: center">-->
<!--          <img style="width: 200px;" src="../../assets/adminimg.png">-->
<!--        </div>-->
      </div>

      <div class="main" style="flex:1;overflow-y: scroll;">
        <router-view v-slot="{ Component }">
          <keep-alive>
            <component :key="$route.name" :is="Component"  v-if="$route.meta.keepAlive"/>
          </keep-alive>
          <component :key="$route.name" :is="Component"  v-if="!$route.meta.keepAlive"/>
        </router-view>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "indexPage",

  data(){
    return{
      screenWidth: document.body.clientWidth,
      device:3,
      isCollapse: false,
      isFullFlag: false,
      path :'',
    }
  },
  methods:{
    changeCollapse() {
      this.isCollapse = !this.isCollapse;
    },
    getDevice(){
      if(this.device === 1){
        return "mobile";
      }
      if(this.device === 2){
        return "tablet";
      }
      if(this.device === 3){
        return "pc";
      }
    },
    getMenuClass(){
      return this.isCollapse ? 'notCollapse' : 'isCollapse'
    },
    getIsCollapse(){
      if (this.device == 2)return true;
      return this.isCollapse
    },
    changeSize(){
      const that = this;
      that.screenWidth = document.body.clientWidth;
      if (that.screenWidth < 768) {
        that.device = 1;
      }
      // eslint-disable-next-line no-dupe-else-if
      else if (that.screenWidth < 1200) {
        that.device = 2;
      }
      else {
        that.device = 3;
      }
    },
    fullScreen() {
      var element = document.documentElement;
      if (!this.isFullFlag) {
        element.requestFullscreen();
      } else {
        element.exitFullscreen();
      }
      this.isFullFlag = !this.isFullFlag
    },

    exitFullScreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen()
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen()
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen()
      }
      this.isFullFlag = !this.isFullFlag
    },

    getUsername(){
      var jsonObj = JSON.parse(window.localStorage.getItem('user'));
      return jsonObj.nickname;
    } ,

    loginout() {
      window.sessionStorage.removeItem('token');
      this.$router.push({ path: '/login' })
    },
  },
  watch: {

  },

  mounted() {
    const that = this;
    that.changeSize();
    window.onresize = () => {
      that.changeSize();
    }
    this.path = this.$route.path;
  },

}
</script>

<style scoped>
.header{

  z-index: 999;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  transition: all .2s ease !important;
}

.header-top , .header-logo{
  background: white;
  box-sizing: border-box;
  -webkit-box-shadow: 0 0 20px rgb(89 102 122 / 10%) !important;
}

.header-logo{
  z-index: 999;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  transition: all .2s ease !important;
}

.content{
  flex: 1;
  display: flex;
  flex-direction: row;
}

.header-logo img:first-child{
  max-width: 45px;

}

.header-logo img:last-child{
  max-width: 120px;
  margin-left: 16px;
}

.header-right {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.my-account-wrapper {
  background-color: #ffffff;
  padding: 4px 12px;
  position: relative;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  box-shadow: 0 0 20px rgb(89 102 122 / 10%) !important;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.el-icon {
  --color: inherit;
  height: 1em;
  width: 1em;
  line-height: 1em;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  fill: currentColor;
  color: var(--color);
  font-size: inherit;
}


.header .header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 30px;
  flex: 1;
  transition: all .2s ease !important;
}

.menu{
  transition: all .2s ease !important;
  background: white;
  z-index: 1;
  -webkit-box-shadow: 0 0 20px rgb(89 102 122 / 10%) !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
;
}

.pc{
  height: 96px;
}

.pc .header-logo{
  width: 300px;
  padding: 0px 40px;
}

.pc .header-logo.notCollapse{
  width: 80px;
  padding: 0px 40px;
}

.pc .menu.notCollapse{
  width: 80px;
}


.pc .header-logo.notCollapse img:last-child{
  display: none;
}


.pc .menu{
  width: 300px;
}

.tablet {
  height: 80px;
}

.tablet .header-logo{
  width: 100px;
}

.tablet .menu{
  width: 100px;
}

.tablet .menu .el-menu .el-menu-item .el-menu-tooltip__trigger{
  padding: 0px 28px;
}


.tablet .menu .el-tooltip__trigger{
  padding: 0px 28px;
}



.tablet .header-logo img:last-child{
  display: none;
}

.tablet .el-menu {
  width: 80px;
}




.mobile{
  height: 80px;
}

.mobile .header-logo{
  width: 80px;
}

.mobile .header-logo img:last-child{
  display: none;
}

.mobile .header-logo img:first-child{
  max-width: 40px;
}

.mobile .menu{
  width: 300px;
  position: fixed;
  left: 0;
  top: 80px;
  height: 600px;
}
.mobile .menu.notCollapse{
  left: -100%;
}


.mobile .menu.isCollapse{
  left: 0px;
}



.el-menu {
  border: 0 !important;

}

.el-menu-item {
  color: var(--theme_second_color);
}

.el-sub-menu span {
  color: var(--theme_admin_second_color);
}

.el-sub-menu .el-icon {
  color: var(--theme_admin_second_color);
}

.el-menu-item.is-active {
  color: var(--theme_admin_primary_color);
  /* color: rgb(249, 181, 55); */
}

.el-menu-item:hover {
  color: var(--theme_admin_primary_color);
  background-color: transparent;
}

.el-menu-item.is-active {
  background-color: #f8f8f8;
  padding: 15px 20px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.el-menu-item span {
  margin-left: 8px;
}

.el-menu-item [class^=el-icon] {
  margin-right: 16px;
}

/*!* 小设备 (平板电脑和大型手机，600 像素及以上) *!*/
/*@media only screen and (min-width: 0px) {*/
/*  .header{*/
/*    height: 80px;*/
/*  }*/
/*}*/

/*!* 中型设备（平板电脑，768 像素及以上） *!*/
/*@media only screen and (min-width: 768px) {*/
/*  .header{*/
/*    height: 80px;*/
/*  }*/
/*}*/

/*!* 大型设备（笔记本电脑/台式机，992 像素及以上） *!*/
/*@media only screen and (min-width: 992px) {*/
/*  .header-logo{*/
/*    width: 300px;*/
/*  }*/

/*  .header{*/
/*    height: 96px;*/
/*  }*/
/*}*/

</style>
